<template>

        <div :loading="loading" class=" bg-white p-4 rounded">
            <el-form :model="form"  label-width="160px">
                <el-tabs v-model="active" type="card" tab-position="top" @tab-click="">
                    <el-tab-pane
                        label="注册与访问"
                        name="first">
                        <el-form-item label="是否允许注册会员">
                            <el-radio-group v-model="form.open_reg">
                                <el-radio :label="0" border>
                                   关闭
                                </el-radio>
                                <el-radio :label="1" border>
                                   开启
                                </el-radio>
                            </el-radio-group>
                            
                        </el-form-item>
                        <el-form-item label="注册类型">
                            <el-radio-group v-model="form.reg_method">
                                <el-radio label="usename" border>
                                   普通注册
                                </el-radio>
                                <el-radio label="phone" border>
                                   手机注册
                                </el-radio>
                            </el-radio-group>
                            
                        </el-form-item>
                        <el-form-item label="密码最小长度">
                            <el-input v-model="form.password_min"  size="normal" style="width: 25%;" type="number"></el-input>
                        </el-form-item>
                        <el-form-item label="强制密码复杂度">
                            <!-- {{form.password_encrypt}} -->
                            <el-checkbox-group v-model="form.password_encrypt">
                                <el-checkbox label="0" border>
                                    数字
                                </el-checkbox>
                                <el-checkbox label="1" border>
                                    小写字母
                                </el-checkbox>
                                <el-checkbox label="2" border>
                                    大写字母
                                </el-checkbox>
                                <el-checkbox label="3" border>
                                    符号
                                </el-checkbox>
                            </el-checkbox-group>
                            
                            
                        </el-form-item>
                    </el-tab-pane>
                    <el-tab-pane
                        label="上传设置"
                        name="second">
                        <el-form-item label="默认上传方式">
                            <el-radio-group v-model="form.upload_method">
                                <el-radio :label="oss" border>
                                   阿里oss
                                </el-radio>
                            </el-radio-group>
                            
                        </el-form-item>
                        
                        <el-form-item label="Bucket">
                            <el-input v-model="form.upload_config.Bucket" placeholder="Bucket" size="normal" style="width: 25%;" type="text"></el-input>
                        </el-form-item>
                        <el-form-item label="ACCESS_KEY">
                            <el-input v-model="form.upload_config.ACCESS_KEY" size="normal" style="width: 25%;" type="password"></el-input>
                        </el-form-item>
                        <el-form-item label="SECRET_KEY">
                            <el-input v-model="form.upload_config.SECRET_KEY"  size="normal" style="width: 25%;" type="password"></el-input>
                        </el-form-item>

                        <el-form-item label="命名空间">
                            <el-input v-model="form.upload_config.http" placeholder="http"  size="normal" style="width: 25%;" ></el-input><span class="text-gray-500 ">请补全http://或者https://</span> 
                        </el-form-item>

                    </el-tab-pane>
                    <el-tab-pane
                        label="API安全"
                        name="third">
                        <el-form-item label="是否开启API安全">
                            <el-radio-group v-model="form.api_safe">
                                <el-radio :label="0" border>
                                   是
                                </el-radio>
                                <el-radio :label="1" border>
                                   否
                                </el-radio>
                            </el-radio-group>
                            <span class="text-gray-500 ">api安全功能开启之后调用api需要传输签名串</span>
                        </el-form-item>
                        <el-form-item label="秘钥">
                            <el-input v-model="form.api_secret" placeholder="秘钥"  size="normal" style="width: 25%;"></el-input>
                            
                                <p class="text-gray-500 " >秘钥设置关系系统中的qpi调度传输签名的编码规则，以及会员token解析，请谨慎设置，注意设置之后对应会员要求重新登录获取的token</p>
                           
                        </el-form-item>
                    </el-tab-pane>
                </el-tabs>
                <el-form-item >
                    <el-button :loading = loading type="primary" size="default" @click="submit" >保存</el-button>
                    
                </el-form-item>
                
            </el-form>
            
            
        </div>
</template>
<script setup>
import { getSysconfig, setSysconfig } from '~/api/sysconfig.js'
import { reactive, ref } from 'vue'
import {toast} from '~/composables/util.js'
const active = ref('first')
const form = reactive({
    "open_reg": 1,
    "reg_method": "username",
    "password_min": 7,
    "password_encrypt": [],
    "upload_method": "oss",
    "upload_config": {
        "Bucket": "",
        "ACCESS_KEY": "",
        "SECRET_KEY": "",
        "http": ""
    },
    "api_safe": 1,
    "api_secret": "",
})
//获取数据并且刷新
const loading = ref(false)
function getData() {
    loading.value = true
    getSysconfig()
        .then(res => {
            for (const k in form) {
                // 把响应回来数据的指定key赋值给form的指定key值
                form[k] = res[k];
            }
// 把字符串进行逗号分割编程数组
            form.password_encrypt = form.password_encrypt.split(',')
            console.log(res);
        })
        .finally(() => {
            loading.value = false
        })
}
getData()

const submit = ()=>{
    loading.value = true
    //把数组作为字符串传递参数使用join
    setSysconfig({
        ...form,
        password_encrypt:form.password_encrypt.join(','),
    }).then(res=>{
        toast('修改成')
        getData()
    }).finally(()=>{
        loading.value = false
    })
}
</script>